<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东旅游网</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
    <link rel="stylesheet" href="styles.css">
    <!-- 引入jQuery库，用于简化JavaScript操作 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入轮播图插件的JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <!-- 假设这里有一个用于字体图标（如搜索图标等）的库，可根据实际情况替换或删除 -->
    <script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
       <div class="logo">山东旅游网</div>
       <nav>
            <ul>
                <li><a href="customer.jsp">首页</a></li>
                <li><a href="beautifulshandong.jsp">魅力山东</a></li>
                <li><a href="infomation.jsp">资讯</a></li>
                <li><a href="scenicspots.jsp">景点</a></li>
                <li><a href="ticketpurchase.jsp">购票</a></li>
            </ul>
       </nav>
       <nav class="user-actions">
            <ul>
            	<li><a href="#">${userInfo.username}[${userInfo.memberLevel}]</a></li> 
                <li><a href="userinfo.jsp">个人信息</a></li>
                <li><a href="#">消费记录</a></li>
                <li><a href="#">留言与回复</a></li>
                <li><a href="login.jsp">退出</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <div class="travel-info-container">
            <div class="destination-info-category" style="width: 48%; float: left;">
                <h3>目的地资讯</h3>
                <div class="destination-info">
                    <h4>山东地区</h4>
                    <article>
                        <img src="./images/LunBoTu_1.jpg" >
                        <p>泰山山有深厚的历史文化底蕴，山势雄伟壮观，吸引众多游客登山祈福观景，沿途众多历史古迹和碑刻等见证岁月沧桑。</p>
                    </article>
                    <article>
                        <img src="./images/LunBoTu_2.jpg" >
                        <p>蓬莱阁是中国古代四大名楼之一，传说中八仙过海的出发地，建筑风格独特，周边海景壮美，充满神话色彩，让人流连忘返。</p>
                    </article>
                </div>
            </div>

            <div class="activity-info-category" style="width: 48%; float: right;">
                <h3>活动资讯</h3>
                <div class="activity-info">
                    <h4>山东地区</h4>
                    <article>
                        <img src="./images/LunBoTu_1.jpg" >
                        <p>每年夏季在潍坊举办的音乐节，汇聚了国内外众多知名乐队和歌手，为音乐爱好者们带来一场无与伦比的音乐狂欢盛宴，现场气氛热烈非凡。</p>
                    </article>
                    <article>
                        <img src="./images/LunBoTu_2.jpg">
                        <p>洞庭湖龙舟赛是湖南地区的一项传统民俗活动，每年端午节期间举行，各支龙舟队伍在洞庭湖上奋勇竞渡，传承着中华民族的龙舟文化，吸引了大量游客前来观赛。</p>
                    </article>
                </div>
            </div>
       </div>
    </main>
    
    <footer>
        <div class="footer-container">
            <div class="footer-left">
                <div class="footer-text">
                    <p>
                        <span>Copyright © 2024</span>
                        <span>山东建筑大学</span>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</body>

<style>
    
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
    }
    
    header {
        background-color: white;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        padding: 10px 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .logo {
        color: orange;
        font-size: 24px;
        font-weight: bold;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav ul li {
        margin-left: 20px;
    }

    nav ul li a {
        text-decoration: none;
        color: gray;
    }

    nav ul li a:hover {
        color: black;
    }
   
    main {
        flex: 1;
        text-align: center;
        padding: 20px 0;
    }

    h3 {
        color: #333;
        font-size: 22px;
        margin-bottom: 15px;
        text-align: left;
        padding-left: 20px;
        font-weight: bold;
        border-bottom: 2px solid #ccc;
    }

    h4 {
        color: #555;
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 10px;
        text-align: left;
        padding-left: 40px;
    }

    article {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    article img {
        width: 200px;
        height: 200px;
    }
    
    footer {
        background-color: green;
        color: white;
        padding: 15px 0;
        width: 100%;
        height: 40px;
        margin-top:160px;
    }

    .footer-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .footer-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-text {
        text-align: center;
    }
    
    </style>